<template>
    <div style='margin:50px;'>
        <h3>
            添加路径
        </h3>
        <el-form ref="form" :model="form" label-width="80px">
            <div style="text-align: center">
            <el-form-item label='路径名' style='width:400px'>
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <div style= 'float:left'>
                <el-form-item label='头图'></el-form-item>
            </div>
            <div style= 'float:left'>
                <el-upload
                    class="avatar-uploader"
                    :auto-upload="true"
                    :data='qiniuData'
                    action="http://up-z1.qiniu.com"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
            <div style='clear:both'></div>
            <br  />
            <el-form-item label="描述">
                <el-input type="textarea" v-model="form.desc" :autosize="{ minRows: 2, maxRows: 6}"></el-input>
            </el-form-item>
            <div v-for="(stage, index) in stage_list" :key='index'>
                <el-form-item :label="'阶段' + (index+1)">
                    <!-- {{ stage }} -->
                    <el-input v-model='stage.name'></el-input>
                </el-form-item>
                <el-transfer
                style="text-align: left; display: inline-block"
                v-model="stage.courses"
                filterable
                :left-default-checked="[]"
                :right-default-checked="[]"
                :render-content="renderFunc"
                :titles="['课程列表', '阶段']"
                :button-texts="['到左边', '到右边']"
                :format="{
                    noChecked: '${total}',
                    hasChecked: '${checked}/${total}'
                }"
                @change="(value, direction, movedKeys)=>handleChange(value, direction, movedKeys, index)"
                :data="course_list">
                <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
                <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
                </el-transfer>
                <br  />
                <br  />
                <br  />
                <br  />
            </div>
            <br  />
            <br  />
            <br  />
            <br  />
            <el-button @click='add_stage'>添加阶段</el-button>
            <el-button type="primary" @click='submit_path'>提交路径</el-button>
            </div>
        </el-form>
        
    </div>
</template>

<script>
import { get_course_all, get_uptoken, path_post } from "../axios_api/api"

export default {
    data() {
        return {  
            all_selected:[],
            qiniuData:{             //上传图片携带的参数
                token : "",
                key : "",
            },
            imageUrl: '',
            stage_list:[
                {name:'', courses:[]}
            ],
            form:{
                name:'',
                img:'',
                desc:'',
            },
            course_list: [],
            // course_list: generateData(),
            value: [],
            renderFunc(h, option) {
            return <span>{ option.key } - { option.label }</span>;
            }
        };
    },
    mounted(){
        console.log(this.course_list)
        this.get_courses()
        this.get_uptoken()
    },
    methods:{
        // 提交
        submit_path(){
            console.log(this.form)
            var data = {
                form: this.form,
                stage: this.stage_list
            }
            path_post(data).then(resp=>{
                this.$message('添加成功')
            })
        },
        // 生成uuid
        guid2() {
            function S4() {
                return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            }
            return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
        },
        // 获取七牛云凭证
        get_uptoken(){
            get_uptoken().then(res=>{
                this.qiniuData.token = res.token
                console.log(this.qiniuData)
            })
            // 生成key
            this.qiniuData.key = this.guid2()
        },
        // 上传头图
        post_img(){
            console.log() 
            return 'https://jsonplaceholder.typicode.com/posts/'
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = 'http://q9j3oo8by.bkt.clouddn.com/' + this.qiniuData.key;
            this.form.img = this.qiniuData.key
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG && !isPNG) {
            this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
            return isJPG && isLt2M;
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            return isJPG && isLt2M;
            }
        },
        // 添加阶段
        add_stage(){
            this.stage_list.push(
                {name:'', courses:[]}
            )
        },
        // 获取课程列表
        get_courses(){
            get_course_all().then(resp=>{
                for(let i=0; i< resp.data.length; i++){
                    let data = resp.data[i]
                    let item = {}
                    item['disabled'] = false
                    item['key'] = data.id
                    item['label'] = data.name
                    this.course_list.push(item)
                }
            })
        },
        // 选择课程
        handleChange(value, direction, movedKeys, index) {
            console.log(value, direction, movedKeys);
            if(direction=='right'){
                for(var i=0; i<movedKeys.length; i++){
                    if(this.all_selected.indexOf(movedKeys[i])!=-1){
                        console.log('这条数据已经存在')
                        console.log(this.stage_list)
                        this.stage_list[index].courses.slice(0,1)
                        console.log(this.stage_list)
                    }else{
                        console.log('这条数据不存在')
                        this.all_selected.push(movedKeys[i])
                    }
                }
            }
            console.log('-----------------------')
            console.log(this.all_selected)
            console.log('-----------------------')
            console.log(this.stage_list)
        }
    },
    
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.el-transfer-panel{
    width: 400px;
}
.transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
}
</style>
